<template> 
<div class="loginPage"> 
  <FloatingBall  @click="$router.push('/home')"/>
    <div class="header">
				<div class="header-center">
					<div class="header-title">账号登录 
          </div>
					<div class="header-img"></div>
				</div>
		</div>

    <div class="content">
        <div class="content-left">
          <pen />
        </div>
				<div class="content-right">
          <div class="right-infp">
                 <!-- 表单 -->
              <el-form ref="ruleFormRef" :model="form" :rules="rules" class="login_form" status-icon scroll-to-error @keyup.enter.native="submitForm(ruleFormRef)">
                <!-- 账号 -->
                <el-form-item prop="phone">
                  <div class="right-infp-name">
                  <el-input mykeyboard="true"  v-model.trim="form.phone" placeholder="账号">
                    <template #prefix>
                      <span class="ico icon-account"></span>
                    </template>
                  </el-input>
                  </div>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="pwd">
                  <div class="right-infp-name">
                    <el-input  mykeyboard="true"  v-model="form.pwd" type="password" placeholder="密码" show-password></el-input>
                  </div>
                </el-form-item>
                <!-- 登录按钮 -->
                <div class="right-infp-btn">
                  <el-button class="in-btn submit" type="primary" @click="submitForm(ruleFormRef)" >登录</el-button>
                </div>
                <el-checkbox label="记住我" v-model="form.rememberMe"></el-checkbox>
                <!-- <el-button @click="resetForm(ruleFormRef)">取消</el-button> -->
                <!-- <el-button type="primary" @click="test()" class="submit">test</el-button> -->
              </el-form> 

          </div>
       

        </div>  

    </div>

    <!-- <update-version v-show="true"></update-version> 
    <KeyboardIndex
        :transitionTime="'0.5s'"
        :maxQuantify="10"
        :showKeyboard="showKeyboard"
        @clickKey="clickKey"
        float
        :manyDict="manyDict"
        :singleDict="singleDict"
        @clickNumber="clickNumber"
        :blurHide="false"  
      ></KeyboardIndex> -->

</div>
</template>

<script setup lang="ts"> 
let path="";
if(window.electronAPI){
    path=window.electronAPI.base();
}

import { ref,reactive,defineProps,defineComponent,onMounted } from "vue"; 
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { useThemeStore } from '../stores/theme'
import { login } from '../api/index'

const router = useRouter()
const userStore = useUserStore()
const themeStore = useThemeStore()   
const trigger = ['blur', 'change']
const ruleFormRef = ref()
const form = reactive({
    phone: '',
    pwd: '',
    rememberMe:false,
})
const rules = reactive({
    phone: [
        { required: true, message: '请输入您的账号', trigger },
    ],
    pwd: [
        { required: true, message: '请输入您的密码', trigger },
    ]
})
// 提交表单
const submitForm = async (formEl) => {
   if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) { 
      login(form).then(res => {
         if(res.code=='200'&&res.data){
          // 登录成功
          loginSuccess(res.data)
         }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
  if (form.rememberMe === true) {
  // 过期天数为7天
    setCookie(form.phone, form.pwd, 7)
  }else{
    // 清除cookie

  } 
 }
const resetForm = (formEl) => {
  formEl.resetFields();
};
async function  saveStorage(data){ 
  if(!window.electronAPI){
    return;
  }
  let orgId="";
  if(data.orgList&&data.orgList.length>0){
    orgId=data.orgList[0].id
  }
  let user={
    id:data.unifiedUser.id,
    orgId:orgId,
    token:data.token, 
    apiHost:userStore.apiHost
  }
  userStore.setOrgId(orgId)
  window.electronAPI.setUserInfo(user)
}
const loginSuccess = (data) => {
  userStore.setUserToken(data.token)
  userStore.setUserInfo(data.unifiedUser)
  userStore.setOrgList(data.orgList)
  themeStore.setThemeUrl('');
  saveStorage(data)
    let path=localStorage.lastPath;
    if(path){
      localStorage.removeItem("lastPath");
      router.push(path)
    }else{
      router.push('/home')
    } 
} 
function getCookie(){
  if (document.cookie.length > 0) {
    // cookie 分割成一个个独立的 key value 形式
    let arr = document.cookie.split(";")
    for (var i = 0; i < arr.length; i++){
      var arr2 =  arr[i].split('=')
      if (arr2[0] === 'userName') {
        form.phone = arr2[1]
      } else  if (arr2[0] === 'userPwd'){
        form.pwd = arr2[1]
      }
    }
  } 
}

// 设置cookie
function setCookie(name, pwd, exdays){
  var exdate = new Date()
  //
  exdate.setTime(exdate.setTime() + 24 * 60 * 60 * 1000 * exdays);
  window.document.cookie = "userName" + "=" + name + ";path=/;expires=" + exdate.toUTCString();
  window.document.cookie = "userPwd" + "=" + pwd + ";path/;expires" + exdate.toUTCString();
}
// 清除cookie
function clearCookie() {
 setCookie("", "", -1);
} 
onMounted(() => { 
  getCookie()
}); 
</script>

<style lang="scss" scoped> 
.loginPage{
    background-size: 100% 100%;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    margin: 0 auto;
    color: #ffffff;
    font-size: 25px;
}
.header{
  width: 100%;
  height: 150px;
  .header-center{
    width: 50%;
    height: 100%;
    position: relative;
    margin: 0 auto;
    .header-title{
      text-align: center;
      color: #fff;
      font-size: 36px;
      text-shadow: 0 0 0.3rem #00d8ff;
      line-height: 118px;
    }
    .header-img{
      background-size: 100%;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 50px;
    }
  }
}
.content{
  width: 70%;
    height: 70%;
    margin: 100px auto 0 auto;
    .content-left {
      width: 680px;
      height: 637px;
      background-size: 100% 100%;
      padding: 40px 0;
      box-sizing: border-box;
      margin-right: 2%;
      float: left;
    }
    .content-right {
      width: 618px;
      height: 637px;
      background-size: 100% 100%;
      float: right;
      position: relative;
      .right-infp{
        width: 450px;
        height: 350px;
        margin: auto auto;
        position: absolute;
        top: 220px;
        left: 90px;
      }
      .right-infp-name {
        width: 100%;
        height: 50px;
        background-size: 100% 100%;
        line-height: 50px;
        margin-bottom: 40px;
        position: relative;
        :deep(.el-input__wrapper){
          background-color:#ffffff00 !important;
          box-shadow:none !important;
        }
        :deep(.el-input__inner){
          color: #fff !important;
          font-size: 28px !important;
        }
      }
      .right-infp-btn {
        width: 100%;
        height: 50px;
        background-size: 100% 100%;
        line-height: 50px;
        margin-bottom: 40px;
        position: relative;
        .in-btn {
          width: 100%;
          border: 0;
          box-sizing: border-box;
          height: 45px;
          margin-left: 10px;
          font-size: 22px;
          cursor: pointer;
          background: 0;
          outline: 0;
          color: #000;
          position: absolute;
          left: 0;
        }
      }
    }
}
@-webkit-keyframes rotation {
	from {
		-webkit-transform: rotate(0deg)
	}

	to {
		-webkit-transform: rotate(360deg)
	}
}

</style>